<template>
	<view class="content">
		<view class="header">
			<!-- 搜索 -->
			<view class="search">
				<input class="uni-input" focus placeholder="搜索" @input='searchValue' />
				<view class="screen">
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/finance/screen.png" mode="heightFix"></image>
					</view>
					<view class="font24">
						筛选
					</view>
				</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="box">
			<view class="order">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
					<view class="item" v-for="(item,index) in dataList" :key="index" v-if="dataList.length > 0">
						<view class="info">
							<view class="orderId font26 font500">
								订单号：<br />{{item.order_code}}
							</view>
							<view class="profit font36 font800">
								+{{item.pay_price}}
							</view>
						</view>
						<view class="dataBox">
							<view class="chart">
								<qiun-data-charts type="ring" :opts="opts" :chartData="item.chartData" />
							</view>
							<view class="p_info">
								<view class="lever">
									<view class="technician l_item">
										<view class="dian"></view>
										<view class="des">
											技师：{{item.coach_percent}}%
										</view>
									</view>
									<view class="shopowner l_item">
										<view class="dian"></view>
										<view class="des">
											店长：{{item.store_percent}}%
										</view>
									</view>
									<view class="distribution l_item">
										<view class="dian"></view>
										<view class="des">
											分销商：{{item.user_percent}}%
										</view>
									</view>
								</view>
								<view class="l_profit">
									<view class="des">
										{{item.coach_cash}}
									</view>
									<view class="des">
										{{item.store_cash}}
									</view>
									<view class="des">
										{{item.user_cash}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0, //初始化滚动高度
				value: '',
				dataList: [],
				opts: {
					// 横屏模式
					rotate: false,
					// 横屏锁定
					rotateLock: false,
					color: ["#1BB9A3", "#F8BA43", "#538FF8"],
					// padding: [0, 0, 0, 0],
					// 是否显示圆环上的解释
					dataLabel: false,
					enableScroll: false,
					legend: {
						// 是否显示右侧图例
						show: false,
						position: "",
						lineHeight: 25,
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							// 饼的宽度
							ringWidth: 10,
							activeOpacity: 0.5,
							activeRadius: 10,
							// 颜色的角度
							offsetAngle: 18,
							labelWidth: 15,
							// 是否绘制圆环中间的的隔线
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						},
					}
				}, //画圆环图
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			async getData() {
				const data = await this.$api.finance.separateAccounts({
					keydown: this.value
				})
				if(data.length > 0){
					data.map(item => {
						item.chartData = {
							series: [{
								silent: false,
								data: [{
									"name": "技师",
									"value": Number(item.coach_cash),
								}, {
									"name": "店长",
									"value": Number(item.store_cash),
								}, {
									"name": "分销商",
									"value": Number(item.user_cash),
								}]
							}]
						}
					})
					this.dataList = data
				}else{
					uni.showToast({
						icon:'error',
						title:'暂无数据',
						duration:1000
					})
				}
			},
			searchValue(e) {
				this.value = e.detail.value
			},
			// 滚动到底部
			scrolltolower() {},
			// 计算百分比
			toFixedWithoutRound(num) {
				const factor = Math.pow(10, 2);
				return Math.floor(num * factor) / factor;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.header {
			background-color: #fff;
			width: 100%;

			.search {
				padding: 16rpx 43rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.uni-input {
					flex: 1;
					height: 66rpx;
					padding-left: 36rpx;

					/deep/.input-placeholder {
						font-size: 24rpx
					}
				}

				.screen {
					display: flex;
					align-items: center;

					.icon {
						margin-right: 8rpx;

						image {
							height: 21rpx;
						}
					}
				}
			}
		}

		.box {
			padding: 16rpx 29rpx;

			// 订单
			.order {
				.scroll-Y {
					height: calc(100vh - var(--status-bar-height) - 98rpx);

					.item {
						padding: 33rpx 53rpx 51rpx 51rpx;
						margin-bottom: 15rpx;
						background-color: #fff;
						border-radius: 16rpx;

						.info {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.orderId {}

							.profit {
								color: #FF4A00;
							}
						}

						.dataBox {
							margin-top: 68rpx;
							display: flex;
							align-items: center;

							.chart {
								margin-right: 32rpx;
								width: 168rpx;
								height: 168rpx;
							}

							.p_info {
								flex: 1;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.lever {
									line-height: 44rpx;

									.l_item {
										display: flex;
										align-items: center;

										.dian {
											width: 15rpx;
											height: 15rpx;
											border-radius: 50%;
											margin-right: 6rpx;
										}

										.des {
											color: #666666;
										}
									}

									.technician {
										.dian {
											background-color: #1BB9A3;
										}
									}

									.shopowner {
										.dian {
											background-color: #F8BA43;
										}
									}

									.shareholder {
										.dian {
											background-color: #FC8888;
										}
									}

									.distribution {
										.dian {
											background-color: #538FF8;
										}
									}
								}


								.l_profit {
									.des {}
								}
							}
						}
					}
				}
			}
		}
	}
</style>